<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			img{
				width: 600px;
				height: 400px;
			}
			button{
				height: 80px;
				width: 50px;
				background-color: black;
				color: #ffffff;
				opacity: 0.2;
				position: absolute;
				top:150px;
			}
		</style>
	</head>
	<body>
		<div id="app">			
			<div>
				<button v-show="isLeftShow" @click="left()">&lt;</button>
				<img :src="imgSrc[index]" />
				<button v-show="isRightShow" @click="right()">&gt;</button>
			</div>
		</div>
	</body>
	<script>
	var app=new Vue({
		el:"#app",
		data:{
			imgSrc:["img/bm.jpg","img/hl.jpg","img/jm.jpg","img/lm.jpg","img/sh.jpg","img/smy.jpg"],
			index:0	,
			isLeftShow:true,
			isRightShow:true
		},
		methods:{
			left:function(){
				this.isRightShow=true
				this.index--
				if(this.index==0){
					this.isLeftShow=false
				}
			},
			right:function(){
				this.isLeftShow=true;				
				this.index++;
				if(this.index==(this.imgSrc.length-1)){
					this.isRightShow=false
				}
			}
		}
	})
	</script>
</html>
